<template>
  <!-- 提货单列表 -->
  <div class="billOrder_styl" v-if="modalShow">
    <Modal v-model="modalShow" width="900" class="modal_styl" :footer-hide="true" :mask-closable="true">
      <Spin size="large" fix v-if="spinShow" />
      <p slot="header" style="text-align: center">
        <span>提货单列表</span>
      </p>
      <Form ref="editForm" label-position="right" :label-width="85" :model="itemCopy">
        <Row :gutter="24" align="middle">
          <Col span="9">
            <FormItem :label="createType == 'order' ? '订单名称:' : '合同名称:'" prop="name">
              {{ itemCopy.name }}
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem :label="createType == 'order' ? '订单编码:' : '合同编码:'" prop="code">
              {{ itemCopy.code }}
            </FormItem>
          </Col>
          <Col span="7">
            <FormItem :label="createType == 'order' ? '订单类型:' : '合同类型:'"> 普通订单 </FormItem>
          </Col>
        </Row>
        <Row :gutter="24">
          <Col span="9">
            <FormItem label="规格名称:" prop="productAttrName">
              {{ itemCopy.productAttrName }}
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="销售公司:" prop="companyName">
              {{ itemCopy.companyName }}
            </FormItem>
          </Col>
          <Col span="7">
            <FormItem label="业务经理:" prop="personName">
              {{ itemCopy.personName }}
            </FormItem>
          </Col>
          <!-- <Col span="8">
            <FormItem label="可用余额:" prop="companyCode">
              {{ nowAmount }} 元
            </FormItem>
          </Col> -->
          <Col span="6" class="action_styl">
            <!-- <a @click="collapse = !collapse">
              <template v-if="!collapse">
                展开
                <Icon type="ios-arrow-down" />
              </template>
              <template v-else>
                收起
                <Icon type="ios-arrow-up" />
              </template>
            </a> -->
          </Col>
        </Row>
        <!-- <template v-if="collapse"> -->
        <Row :gutter="24">
          <Col span="9">
            <FormItem label="规格单价:" prop="nprice"> {{ itemCopy.nprice }}元 </FormItem>
          </Col>
          <Col span="8">
            <FormItem :label="createType == 'order' ? '订单余量:' : '合同余量:'" prop="billNum"> {{ itemCopy.billNum }}吨 </FormItem>
          </Col>
          <!-- <Col span="9">
              <FormItem label="已下单量:" prop="billNum">
                {{ itemCopy.billNum }}吨
              </FormItem>
            </Col> -->
        </Row>
        <!-- </template> -->
      </Form>
      <Table ref="table" :columns="columns" :data="dataList" :height="500" :loading="spinShow">
        <template slot-scope="{ row, index }" slot="status">
          <Button type="primary" size="small" ghost>
            {{ statusName[row.status] }}
          </Button>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <a @click="$refs.BillOrderDetail.openFun(row, index)">详情</a>
          <Divider v-if="row.status == 1 || row.status == 10" type="vertical" />
          <a v-if="row.status == 1 || row.status == 10" @click="$refs.BillOrderEdit.openFun(row, index)">编辑</a>
        </template>
      </Table>
    </Modal>

    <!-- 提货单修改 -->
    <BillOrderEdit ref="BillOrderEdit" @apiSuccess="getBillList"></BillOrderEdit>
    <!-- 提货单详情 -->
    <BillOrderDetail ref="BillOrderDetail"></BillOrderDetail>
  </div>
</template>

<script>
import BillOrderEdit from "./BillOrder-Edit.vue";
import BillOrderDetail from "./BillOrder-Detail.vue";

export default {
  components: { BillOrderEdit, BillOrderDetail },
  props: {
    createType: {
      type: String,
      default: ""
    } // 根据传入不同的类型 区分 合同（contract）下单还是订单（order）下单
  },
  data() {
    return {
      itemCopy: {},
      nowAmount: 0,
      spinShow: false,
      collapse: false,
      modalShow: false,
      columns: [
        {
          title: "状态",
          key: "status",
          slot: "status",
          align: "center",
          minWidth: 120
        },
        {
          title: "提货单状态",
          key: "code",
          align: "center",
          tooltip: true,
          minWidth: 240
        },
        {
          title: "车牌号",
          key: "carNumber",
          align: "center",
          minWidth: 120
        },
        {
          title: "司机姓名",
          key: "driverName",
          minWidth: 180,
          align: "center",
          tooltip: true
        },
        {
          title: "身份证号",
          key: "driverCard",
          minWidth: 180,
          align: "center",
          tooltip: true
        },
        {
          title: "手机号码",
          key: "driverPhone",
          minWidth: 180,
          align: "center",
          tooltip: true
        },
        {
          title: "预装量(吨)",
          key: "nnum",
          align: "center",
          width: 120
        },
        {
          title: "实装量(吨)",
          key: "netWeight",
          align: "center",
          width: 120
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          width: 120,
          fixed: "right"
        }
      ],
      dataList: [],
      statusName: {
        "000": "待派车",
        0: "已保存",
        1: "已预约",
        2: "已制卡",
        3: "门禁入",
        4: "称皮重",
        5: "已发油",
        6: "称毛重",
        7: "已结算",
        8: "门禁出",
        9: "过期",
        10: "预约等待",
        11: "已作废",
        20: "排队",
        21: "叫号",
        23: "安检通过",
        231: "安检不通过"
      }
    };
  },
  mounted() {
  },
  methods: {
    openFun(item) {
      this.itemCopy = item;
      console.log(this.itemCopy);
      this.getBillList();
      this.modalShow = true;
    },
    // 提货单列表
    getBillList() {
      this.spinShow = true;
      let data = {
        pageSize: 9999
      };
      if (this.createType == "order") {
        data.orderId = this.itemCopy.id;
      } else {
        data.contractId = this.itemCopy.id;
      }
      this.httpGet(this.API.API_takeOrderlist, data)
        .then((res) => {
          this.dataList = res.data.rows;
          this.spinShow = false;
        })
        .catch((err) => {
          console.error("0000errr", err);
          this.spinShow = false;
        });
    },
    toPageFun(item, index) {
      this.$router.push(item.path);
    }
  }
};
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";
@deep: ~">>>";
::v-deep .ivu-modal-header {
  background-image: url("~@/assets/images/modal_back900.png") !important;
}
.billOrder_styl {
  width: 100%;
}
.modal_styl {
  position: relative;
  padding-bottom: 50px;
}
.title_styl {
  color: #000000;
  border-left: 3px solid @themeColor;
  position: relative;
  padding-left: 10px;

  &::after {
    content: "";
    width: 2px;
    height: 12px;
    position: absolute;
    left: 0;
    top: 4px;
  }
}

.ivu-form-item/deep/ {
  margin-bottom: 0px;
}
.action_styl {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.formInfo {
  margin: 10px 0 30px 0;

  .ivu-form-item {
    margin-bottom: 0;
    border-top: #e8eaec 1px solid;
    @{deep} label {
      padding-left: 5px;
      border-right: 1px #e8eaec solid;
      background-color: #f8f8f9;
    }
    @{deep} .ivu-form-item-content {
      padding-left: 8px;
      padding-right: 8px;
      white-space: nowrap;
    }
  }

  @{deep} .overHeight label {
    height: 65px;
  }
  @{deep} .overHeight .ivu-form-item-content {
    height: 65px;
  }
  @{deep} .overHeightMap label {
    height: 150px;
  }
  @{deep} .overHeightMap .ivu-form-item-content {
    height: 150px;
  }
}
.blueColor {
  color: #52a0f3;
}
.blueLine {
  border: 3px #52a0f3 solid;
}
.grayLine {
  border: 3px #f2f2f2 solid;
}
.borderLeft {
  border-left: #e8eaec 1px solid;
}
.borderRight {
  border-right: #e8eaec 1px solid;
}
.borderBottom {
  border-bottom: #e8eaec 1px solid;
}
.borderTop {
  border-top: #e8eaec 1px solid;
}
.content-styl {
  width: 100%;

  .ivu-tabs-bar {
    margin-bottom: 0; //去掉tabs的margin
  }
}

.ivu-modal-content {
  border-radius: 12px;
}
/deep/.ivu-modal-body {
  padding: 20px 40px;
}
</style>
